<template>
  <div>
    <el-tabs v-model="activeTab" type="border-card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="个人信息" name="个人信息">
        <el-button style="margin-bottom: 20px;" type="primary" @click="handleUpdate()" plain>编辑信息</el-button>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名：" label-class-name="my-label" content-class-name="my-content">{{personalInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ personalInfo.idCard }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ personalInfo.gender==0 ? '男' : '女' }}</el-descriptions-item>
          <el-descriptions-item label="年龄"><el-tag size="small">{{ personalInfo.age }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ personalInfo.personalPhone }}</el-descriptions-item>
          <el-descriptions-item label="是否户主">{{ personalInfo.isHouseholder ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item span="2" label="现住址" :content-style="{ 'text-align': 'right' }">{{currentResidentialAddress.fullAddress }}</el-descriptions-item>
          <el-descriptions-item span="2" label="户籍地址" :content-style="{ 'text-align': 'right' }">{{registeredResidence.fullAddress}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="家庭关系" name="家庭关系">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
          <el-table-column prop="name" label="姓名" width="150"></el-table-column>
          <el-table-column prop="gender" label="性别" width="300"></el-table-column>
          <el-table-column prop="cardId" label="身份证号" width="300"></el-table-column>
          <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
          <el-table-column prop="age" label="年龄" width="120"></el-table-column>
          <el-table-column prop="familyroles" label="家庭角色" width="150"></el-table-column>
          <el-table-column prop="relation" label="与户主关系" width="150"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" append-to-body>
      <el-form ref="personalInfoFormRef" :model="editForm" :rules="rules" label-width="120px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="editForm.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="editForm.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="editForm.gender" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker clearable v-model="editForm.birthday" type="date" value-format="YYYY-MM-DD"
                placeholder="请选择出生日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="personalPhone">
              <el-input v-model="editForm.personalPhone" placeholder="请输入联系方式" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否户主" prop="isHouseholder">
              <el-radio-group v-model="editForm.isHouseholder">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="现居住地址" prop="currentResidentialAddress">
              <Cascader :options="addressOptions" @update:address="handleSelectedAddress" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="户籍地址" prop="registeredAddress">
              <Cascader :options="addressOptions" @update:address="handleSelectedResidence" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getPatientInfo } from '@/api/basicPublic/patientInfo/healthRecord/HealthRecord';
import Cascader from "@/components/Cascader/index.vue";

const route = useRoute();
const activeTab = ref('个人信息');
const loading = ref(true);
const personalInfo = ref({
  name: '',
  idNumber: '',
  gender: '',
  age: null,
  personalPhone: '',
  isHouseholder: false,
  birthday: '',
  registeredResidence: {
    province: undefined,//户籍地址-省
    provinceCode: undefined,//户籍地址-省代码
    city: undefined,//户籍地址-市
    cityCode: undefined,//户籍地址-市代码
    area: undefined,//户籍地址-区
    areaCode: undefined,//户籍地址-区代码
    street: undefined,//户籍地址-街道
    streetCode: undefined,//户籍地址-街道代码
    committee: undefined,//户籍地址-社区
    committeeCode: undefined,//户籍地址-社区代码
    detail: undefined,//户籍地址-详细地址
  },
  currentResidentialAddress: {
    province: undefined,//户籍地址-省
    provinceCode: undefined,//户籍地址-省代码
    city: undefined,//户籍地址-市
    cityCode: undefined,//户籍地址-市代码
    area: undefined,//户籍地址-区
    areaCode: undefined,//户籍地址-区代码
    street: undefined,//户籍地址-街道
    streetCode: undefined,//户籍地址-街道代码
    committee: undefined,//户籍地址-社区
    committeeCode: undefined,//户籍地址-社区代码
    detail: undefined,//户籍地址-详细地址
  },
});
const currentResidentialAddress = ref({});
const registeredResidence = ref({});
const registeredAddress = ref({});
const addressOptions = ref([]); // 地址选项数据
const editForm = reactive({ ...personalInfo.value });
const dialog = reactive({
  visible: false,
  title: ''
});
const buttonLoading = ref(false);
const rules = {
  // 添加相应的验证规则
};
const handleClick = (tab, event) => {
  console.log(tab, event)
}
async function fetchPatientData() {
  try {
    const id = route.query.id;
    const res = await getPatientInfo(id);
    Object.assign(personalInfo.value, res.data);
    Object.assign(currentResidentialAddress.value, res.data.currentResidentialAddress || {});
    Object.assign(registeredResidence.value, res.data.registeredResidence || {});
    // 初始化编辑表单
    Object.assign(editForm, personalInfo.value);
    // 如果有地址选项数据，请在这里获取并赋值给 addressOptions
    // addressOptions.value = await getAddressOptions();
  } catch (error) {
    console.error("Failed to fetch patient info:", error);
  } finally {
    loading.value = false;
  }
}

function handleUpdate() {
  // 将当前个人信息复制到编辑表单中
  Object.assign(editForm, personalInfo.value);
  // 初始化地址选择器
  editForm.currentResidentialAddress = JSON.parse(JSON.stringify(currentResidentialAddress.value));
  editForm.registeredAddress = JSON.parse(JSON.stringify(registeredAddress.value));
  dialog.visible = true;
  dialog.title = "编辑个人信息";
}

function cancel() {
  dialog.visible = false;
  // 取消编辑时重置表单为原始值
  Object.assign(editForm, personalInfo.value);
}

async function submitForm() {
  try {
    buttonLoading.value = true;
    // 在这里添加提交表单的逻辑，比如发送API请求更新数据
    // 更新成功后同步到personalInfo中
    Object.assign(personalInfo.value, editForm);
    dialog.visible = false;
  } catch (error) {
    console.error("Failed to update patient info:", error);
  } finally {
    buttonLoading.value = false;
  }
};
const handleSelectedAdress = (value) => {
  form.value.currentResidentialAddress = value
};
const handleSelectedResidence = (value) => {
  form.value.registeredResidence = value
};
onMounted(() => {
  fetchPatientData();
});
</script>

<style scoped>
.tab {
  overflow: hidden;
  margin-bottom: 1rem;
}

.tab-button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  background-color: #ddd;
  /* 默认背景颜色 */

}

.tab-button.active,
.tab-button:hover {
  background-color: #31AFEE;
  color: #fff;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border-top: none;
}
</style>
